<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <style>
        .box {
            border: 1px solid;
            width: 800px;
            min-height: 300px;
            margin: 50px auto;
        }

        #up {
            margin-top: 5px;
            height: 25px;
            display: flex;
            justify-content: space-between;
        }

        input:nth-child(5) {
            width: 50px;
        }

        table {
            font-size: 14px;
            width: 100%;
            margin-top: 10px;
            text-align: center;
            border-spacing: 0px;
            border-collapse: collapse;
        }

        table td {
            border: 1px solid red;
        }

        span {
            cursor: pointer;
        }
    </style>


</head>
<body>


<div class="box">
    <div id="up">
        <input type="text" placeholder="请输入您的姓名">
        <input type="text" placeholder="请输入您的性别">
        <input type="text" placeholder="请输入您的年龄">
        <input type="text" placeholder="请输入您的专业">
        <input type="button" value="添加">

    </div>
    <table id="tab">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>专业</td>
            <td>操作</td>
        </tr>
    </table>
</div>
</body>

<script>
    var inputs = document.querySelectorAll("input");  //获取元素
    var tab = document.getElementById("tab");

    inputs[4].onclick = function () {       //绑定点击事件
        for (var i = 0; i < inputs.length - 1; i++) {
            if (inputs[i].value == "") {    //当前面输入框为空时,弹出提示信息
                alert("请填写完整信息");
                return false;           // 阻止全部为空时alert一直弹窗;
            }
        }
        var tr = document.createElement("tr");  //创建一个行元素
        tab.appendChild(tr);                    //把tr追加到父元素下


        var td1 = document.createElement("td");  //创建一个单元格
        tr.appendChild(td1);                     //把单元格追加到父元素tr下
        td1.innerHTML = inputs[0].value;          //把输入框的value值赋给单元格

        var td2 = document.createElement("td");
        tr.appendChild(td2);
        td2.innerHTML = inputs[1].value;

        var td3 = document.createElement("td");
        tr.appendChild(td3);
        td3.innerHTML = inputs[2].value;

        var td4 = document.createElement("td");
        tr.appendChild(td4);
        td4.innerHTML = inputs[3].value;

        var td5 = document.createElement("td");
        tr.appendChild(td5);
        td5.innerHTML = "<span>删除</span>";

        var span = document.querySelectorAll("span") //创建一个span-->>用来装最后一个单元格的删除(可点击,点击事件)              //赋值span的内容
        // console.log(span);
        for (var i = 0; i < span.length; i++) {
            span[i].onclick = function () {
                this.parentNode.parentNode.remove();
            }
        }
        clear();        //调用下面函数
    }

    function clear() {          //点击添加按钮以后，自动清空
        for (var i = 0; i < inputs.length - 1; i++) {
            inputs[i].value = "";
        }
    }


</script>


</html>